<template>
    <div style="background-color:#fff;padding: 10px;">
     <!-- 人员行程信息 -->
        <div>
            <el-table
                :data="peopleInfoTable"
                height="calc(100% - 80px)"  size="small" ref="tripInfo" @row-click="peopleListdetails"
                :cell-style="cellStyle" style="border:1px solid #d6cfe2;min-height:350px"
                :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren'}"
                row-key="id" class="table">
                <el-table-column prop="name" width="80" label="姓名" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sex" width="60" label="性别" align="center" show-overflow-tooltip :formatter="sexFormatter"></el-table-column>
                <el-table-column prop="age" width="60" label="年龄" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="电话" width="110" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.phone?scope.row.phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"):""}}</template>
				</el-table-column>
                <el-table-column prop="idCard"  width="110" show-overflow-tooltip>
					<template slot-scope="scope">{{scope.row.idCard? scope.row.idCard.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2"):""}}</template>
				</el-table-column>
                <el-table-column prop="company.name" label="公司" show-overflow-tooltip></el-table-column>
                <el-table-column prop="office.name" label="部门" show-overflow-tooltip></el-table-column>
               
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="peopleInfoHandleSize" @current-change="peopleInfoHandleCurrent" :current-page.sync="peopleInfoPageNo"
                :page-size="peopleInfoPageSize" layout="total, prev, pager, next, jumper" :total="peopleInfoTotal" style="margin: 1rem 0;">
            </el-pagination>
            <!-- 弹出框 -->
            <el-dialog title="个人行程信息" width="80%" :visible.sync="peopleTripDetailsDialog">
             <el-button size="small" icon="el-icon-circle-plus-outline" @click="exportInfo_people">导出</el-button>
                <el-table
                    :data="peopleTripDetailsInfoTable" size="small" ref="tripDetailsInfo"
                    :cell-style="cellStyle" style="border:1px solid #d6cfe2;min-height:350px" height="calc(100% - 80px)"
                    :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren'}"
                    row-key="id" class="table">
                    <el-table-column prop="user.name" label="姓名" align="center" width="80" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="user.sex" label="性别" align="center" width="60" show-overflow-tooltip :formatter="userSexFormatter"></el-table-column>
                    <el-table-column prop="user.age" label="年龄" align="center" width="60" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="phone" label="电话" width="110" show-overflow-tooltip>
					    <template slot-scope="scope">{{scope.row.phone?scope.row.phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"):""}}</template>
                    </el-table-column>
                    <el-table-column prop="user.idCard" label="身份证号" width="110" show-overflow-tooltip>
                        <template slot-scope="scope">{{scope.row.user.idCard? scope.row.user.idCard.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2"):""}}</template>
                    </el-table-column>
                    <el-table-column prop="companyname" label="公司" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="officename" label="部门" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="departuretime" label="出发时间" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="destinationtime" label="到达时间" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="checktime" label="打卡时间" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="carnumber" label="车牌号" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="animalheat" label="体温" width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="travelType" label="出行方式" width="100" show-overflow-tooltip :formatter="travelTypeFormatter"></el-table-column>
                    <el-table-column prop="departureplace" label="出发地" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="destination" label="目的地" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="idCard" label="备注" width="250" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <!-- 人员行程下面的信息 -->
        <div style="margin-top: 10px">
        <!-- 搜索 -->
            <el-date-picker
            v-model="searchTime"
            type="datetimerange"
            range-separator="-"
            size='small'
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="searchTimeChang"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
            <div style="float:right">
             <el-button type="primary" size="small" @click="seachGetInfo" style="margin-left:10px">查询</el-button>
             <el-button size="small" icon="el-icon-circle-plus-outline" @click="exportInfo">导出</el-button>
             </div>
            <!-- 下面内容 -->
            <el-table
                :data="tripDetailsInfoTable" size="small" ref="tripDetailsInfo"
                :cell-style="cellStyle" style="border:1px solid #d6cfe2;min-height:350px" height="calc(100% - 80px)"
                :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren'}"
                row-key="id" class="table">
                <el-table-column prop="user.name" label="姓名" align="center" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column prop="user.sex" label="性别" align="center" width="60" show-overflow-tooltip :formatter="userSexFormatter"></el-table-column>
                <el-table-column prop="user.age" label="年龄" align="center" width="60" show-overflow-tooltip></el-table-column>
                
                <el-table-column prop="user.phone" label="电话" width="110" show-overflow-tooltip>
					    <template slot-scope="scope">{{scope.row.user.phone?scope.row.user.phone.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3"):""}}</template>
                </el-table-column>
                <el-table-column prop="user.idCard" label="身份证号" width="110" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.user.idCard? scope.row.user.idCard.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2"):""}}</template>
                </el-table-column>
                <el-table-column prop="companyname" label="公司" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="officename" label="部门" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="travelType" label="出行方式" width="150" show-overflow-tooltip :formatter="travelTypeFormatter"></el-table-column>
                <el-table-column prop="departuretime" label="出发时间" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="destinationtime" label="到达时间" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="checktime" label="打卡时间" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="carnumber" label="车牌号" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="animalheat" label="体温" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column prop="departureplace" label="出发地" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="destination" label="目的地" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="idCard" label="备注" width="250" show-overflow-tooltip></el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="tripInfoHandleSize" @current-change="tripInfoHandleCurrent" :current-page.sync="tripInfoPageNo"
                :page-size="tripInfoPageSize" layout="total, prev, pager, next, jumper" :total="tripInfoTotal" style="margin: 1rem 0;">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import tableStyles from '../../../../../utils/mixins.js'
    import { colorSpan } from '../../../sys/dashboard/echarts/default.js'
    export default {
        mixins: [tableStyles],
        data() {
            return{
                //选择的用户id
                userId:'',
                 // 人员行程表格信息
                peopleInfoTable:[],
                // 人员行程点开的详情
                peopleTripDetailsDialog:false,
                //个人详细的行程信息
                peopleTripDetailsInfoTable:[],
                //人员行程的分页
                peopleInfoPageNo:1,
                peopleInfoPageSize:10,
                peopleInfoTotal:0,

                //人员下面的详细信息
                tripDetailsInfoTable:[],
                //人员行程下面详细的分页
                tripInfoPageNo:1,
                tripInfoPageSize:10,
                tripInfoTotal:0,

                //搜索时间
                searchTime:'',
                beginTime:'',
                endTime:'',
            }
        },
        mounted(){
            this.getPeopleInfo()
            this.getPeopleTripInfo()
        },
        methods:{
            //获取人员信息
            getPeopleInfo(){
                this.$http({
                    url: '/sys/oa/carinfo/selectuUserListofHoinfo',
                    method: 'get',
                    params: {
                        'pageNo':this.peopleInfoPageNo,
                        'pageSize':this.peopleInfoPageSize
                    }
                }).then(({data}) => {
                    if (data && data.success) {
                        this.peopleInfoTable = data.list
                        this.peopleInfoTotal = data.totalCount
                    }
                })
            },
            //获取人员行程信息
            getPeopleTripInfo(){
                this.$http({
                    url: '/sys/oa/carinfo/hodometerList',
                    method: 'get',
                    params: {
                        'pageNo':this.tripInfoPageNo,
                        'pageSize':this.tripInfoPageSize
                    }
                }).then(({data}) => {
                    if (data && data.success) {
                        this.tripDetailsInfoTable = data.list
                        this.tripInfoTotal = data.totalCount
                    }
                })
            },
             //性别字典
            sexFormatter(row,column){
                if(row.sex==0){
                    return "男";
                }else if(row.sex==1){
                    return "女";
                }
            },
            userSexFormatter(row,column){
                if(row.user.sex==0){
                    return "男";
                }else if(row.user.sex==1){
                    return "女";
                }
            },
            //出行字典
            travelTypeFormatter(row,column){
                if(row.travelType==0){
                    return "步行";
                }else if(row.travelType==1){
                    return "骑行";
                }else if(row.travelType==2){
                    return "公交";
                }else if(row.travelType==3){
                    return "打车";
                }else if(row.travelType==4){
                    return "自驾";
                }else if(row.travelType==5){
                    return "地铁";
                }
            },
             //个人信息点击的行
            peopleListdetails(row){
                this.userId = row.id
                this.peopleTripDetailsInfoTable = []
                this.peopleTripDetailsDialog=true
                this.$http({
                    url: '/sys/oa/carinfo/userHodometerDetail',
                    method: 'get',
                    params: {
                        'userId': row.id,
                        'pageNo':this.peopleInfoPageNo,
                        'pageSize':this.peopleInfoPageSize
                    }
                }).then(({data}) => {
                    if (data && data.success) {
                        this.peopleTripDetailsInfoTable = data.list
                    }
                })
            },
             //个人信息分页
            peopleInfoHandleSize(val){
                this.peopleInfoPageSize = val
                this.peopleInfoPageNo = 1
                this.getPeopleInfo()
            },
            peopleInfoHandleCurrent(val){
                this.peopleInfoPageNo = val
                this.getPeopleInfo()
            },

             //下面个人行程信息分页
            tripInfoHandleSize(val){
                this.tripInfoPageSize = val
                this.tripInfoPageNo = 1
                this.getPeopleTripInfo()
            },
            tripInfoHandleCurrent(val){
                this.tripInfoPageNo = val
                this.getPeopleTripInfo()
            },

            //获取搜索日期
            searchTimeChang(val){
                if (val) {
                    this.beginTime = val[0];
                    this.endTime = val[1];
                } else {
                    this.beginTime = '';
                    this.endTime = '';
                    this.getPeopleTripInfo()
                }
            },
            //搜索
            seachGetInfo(){
                this.$http({
                    url: '/sys/oa/carinfo/searchHodometer',
                    method: 'get',
                    params: {
                        'pageNo':this.peopleInfoPageNo,
                        'pageSize':this.peopleInfoPageSize,
                        'beginTime':this.beginTime,
                        'endTime':this.endTime
                    }
                }).then(({data}) => {
                    if (data && data.success) {
                        this.tripDetailsInfoTable = data.list
                        this.tripInfoTotal = data.totalCount
                    }else{
                        this.tripDetailsInfoTable =[]
                    }
                })
            },
            // 导出
            exportInfo(){
                let url="/sys/oa/carinfo/exportExcel?beginTime="+this.beginTime+"&endTime="+this.endTime;
				window.location.href=this.$http.BASE_URL+url;
            },
            // 个人行程导出
            exportInfo_people(){
                let url="/sys/oa/carinfo/exportExcel?user="+this.userId;
				window.location.href=this.$http.BASE_URL+url;
            },
        }
    }
</script>